<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<link rel="stylesheet" type="text/css" href="../../css/demo.css" />
<script src="../../js/demo.js" type="text/javascript" charset="utf-8"></script>
<title>订单管理</title>
</head>
<body>
	<!--header-->
	<div class="header">
		<div class="header-content">
			<ul class="nav left">
				<li><img src="../../img/regist-arrow.png" /></li>
				<li class="nav-one"><a href="javascript:history.go(-1);">返回</a></li>
				<li class="nav-two"><a href="../../">关闭</a></li>
			</ul>
			<p class="left">订单管理</p>
			<div class="right nav_right">
				<img src="../../img/regist-list.png" />
			</div>
		</div>
	</div>
	<!--main-->
	<div class="main clear" style="margin-bottom: 1rem;">
		<div class="selfcenter-manage">
			<div class="selfcenter-manage-search">
				<img src="../../img/shopuser-icon4.png" class="left" />
				<div class="selfcenter-manage-search-M left">
					<form action="">
						<input type="text" name="search" id="selecenter-manage-search"
							 placeholder="搜索全部订单" /> <img
							src="../../img/shopmanagement-icon9.png" onclick="selectBillByBillCode()" />
					</form>
				</div>
				<img src="../../img/selfcenter-manage3.png" class="right" />
			</div>
		</div>
		<div class="selfcenter-managenav">
			<ul class="selfcenter-managenavlist">
				<li  onclick="clickStatus(2)" value="2">待发货</li>
				<li  onclick="clickStatus(1)" value="1">待付款</li>
				<li  onclick="clickStatus(3)" value="3">待收货</li>
				<li  onclick="clickStatus(4)" value="4">待评价</li>
				<li  onclick="clickStatus(5)" value="5">退款中</li>
			</ul>
		</div>
		
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript">
		/* 从地址栏截取订单状态 */
		var searchStr = location.search.substr(1);
		if(searchStr==""){
			searchStr=2;
		}
		/* 更改选择样式  */
		$("li[value='"+searchStr+"']").addClass("selfcenter-manageactive");
		/* 查询未发货订单  */
		selectBillByStatus(searchStr);
		/* 根据订单状态查询订单  */
		function selectBillByStatus(status){
			$.ajax({
				type:"post",
				url:"/qiaomengapp/bill/api/selectBillByStatus/"+status,
				dataType:"json",
				success:function(data){
					showData(data);
				}
			});
		}
		
		//点击订单状态
		function clickStatus(status){
			selectBillByStatus(status);
			//切换选中项
			$(".selfcenter-manageactive").removeClass();
			//点击的下面显示红线
			$(event.target).addClass("selfcenter-manageactive");
			//清空搜索框内容
			$("input[name='search']").val("");
		}
		
		//根据订单编号查询供应商
		function selectProvider(){
			var $img = $(event.target);
			//得到订单编号
			var billCode = $img.attr("billCode");
			
			//根据订单编号查询供应商
			$.ajax({
				type:"post",
				url:"/qiaomengapp/bill/api/selectProviderByBillCode/"+billCode,
				dataType:"json",
				success:function(data){
					var $div=$img.closest(".selfcenter-alert");
					$div.html("<ul class='selfcenter-alertlist'>"+
									"<li class='left' style='margin-right: 0.2rem;'><img"+
									" src='../../img/selfpagelist-icon4.png' onclick='alertConnection()' qq='"+data.qq+"' /></li>"+
								"<li class='left'><img src='../../img/selfpagelist-icon3.png' onclick='alertConnection()' phone='"+data.phone+"' /></li>"+
								"<li><img src='../../img/selfpagelist-icon2.png'"+
									"style='width: 1.33rem; height: 0.53rem;' onclick='clickCancel()' /></li>"+
							"</ul>");
				}
			});
		}
		
		//点击取消
		function clickCancel(){
			var $img = $(event.target);
			var $div=$img.closest(".selfcenter-alert");
			//得到订单编号和订单价格
			var billCode = $div.attr("billCode");
			var billPrice = $div.attr("billPrice");
			$div.html("<div class='selfcenter-alertlist'>"+
							"<span style='color:red;'>订单合计：￥"+billPrice+"</span>"+
							"<img src='../../img/selfpagelist-icon.png'"+
								"style='width: 1.33rem; height: 0.52rem;' onclick='selectProvider()' billCode='"+billCode+"' />"+
						"</div>");
		}
		
		//弹出联系方式
		function alertConnection(){
			var $img = $(event.target);
			if($img.attr("qq")!=undefined){
				alert("QQ帐号为："+$img.attr("qq"));
			}else if($img.attr("phone")!=undefined){
				alert("电话联系方式为："+$img.attr("phone"));
			}
		}
		
		//根据订单编号查询订单
		function selectBillByBillCode(){
			var $img = $(event.target);
			var $input = $img.siblings("input");
			var billCode = $input.val();
			if(billCode==""){
				alert("请输入查询的订单号！");
				return;
			}
			//查询订单
			$.ajax({
				type:"post",
				url:"/qiaomengapp/bill/api/selectBillByBillCode/"+billCode,
				success:function(data){
					if(data==""){
						$(".selfcenter-money,.selfcenter-manage-line,.selfcenter-alert").remove();
						//清除上一次的显示内容
						$("#billHint").remove();
						$('.main').append("<div id='billHint' style='font-size:16px;'>该订单不存在！</div>");
					}else{
						showData(data);
						//根据订单状态显示状态选中
						$(".selfcenter-manageactive").removeClass();
						//点击的下面显示红线 
						for ( var key in data) {
							var bill = eval("("+key+")");
							$(".selfcenter-managenavlist li[onclick='clickStatus("+bill.status+")']").addClass("selfcenter-manageactive");
						}
					}
				}
			});
		}
		
		//显示订单数据
		function showData(data){
			/* 清除上一次显示内容 */
			$(".selfcenter-money,.selfcenter-manage-line,.selfcenter-alert").remove();
			$("#billHint").remove();
			for ( var billStr in data) {
				var bill=eval("("+billStr+")");
				
				//根据订单状态显示相应信息
				var statusStr;
				if(bill.status==1){
					statusStr="买家未付款";
				}else if(bill.status==2){
					statusStr="商家待发货";
				}else if(bill.status==3){
					statusStr="买家待收货";
				}else if(bill.status==4){
					statusStr="买家待评价";
				}else if(bill.status==5){
					statusStr="买家申请退款中";
				}
				$('.main').append("<div class='selfcenter-money'>"+
						"<div class='selfcenter-moneylist'>"+
						data[billStr][0].shopName+"<img src='../../img/selfcenter-manage2.png' />"+
						"<span style='margin-left:20px;'>订单编号："+bill.billCode+"</span><span class='right'>"+statusStr+"</span>"+
						"</div>"+
					"</div>");
				
				/* 遍历订单中的商品  */
				var data2=data[billStr];
				for ( var i in data2) {
					var shopGood = data2[i];
					
					$('.main').append("<div class='selfcenter-manage-line'>"+
							"<div class='selfcenter-manage-list'>"+
							"<img src='../../imgs/shopmanagement-icon.jpg' class='left' />"+
							"<ul class='selfcenter-manage-listes'>"+
								"<li class='selfcenter-manage-one'><span>"+shopGood.goodDesc+"</span>"+
									"<span class='right' style='color: #898989;'>￥"+shopGood.price+"</span></li>"+
								"<li class='selfcenter-manage-thr'>颜色："+shopGood.colorName+"； 鞋码："+shopGood.size+"；<span"+
									" class='right'>×"+shopGood.num+"</span></li>"+
								"<li class='selfcenter-manage-two'>共<span>"+shopGood.num+"</span>件商品<span>合计：</span><span>￥"+(shopGood.num*shopGood.price)+"</span></li>"+
							"</ul>"+
						"</div>"+
					"</div>");	
				}
		
				if(bill.status==4){
					$('.main').append("<div class='selfcenter-alert'>"+
							"<div class='selfcenter-alertlist'>"+
							"<span style='color:red;'>订单合计：￥"+bill.price+"</span>"+
							"<img src='../../img/selfcenter-manage.png' billCode='"+bill.billCode+"' onclick='userEvaluate()'  />"+
						"</div>"+
					"</div>");		
				}else if(bill.status!=5){
					$('.main').append("<div class='selfcenter-alert'>"+
							"<div class='selfcenter-alertlist'>"+
							"<span style='color:red;'>订单合计：￥"+bill.price+"</span>"+
							"<img src='../../img/selfcenter-manage.png' billCode='"+bill.billCode+"'  />"+
						"</div>"+
					"</div>");	
				}else{
					$('.main').append("<div class='selfcenter-alert' billPrice='"+bill.price+"' billCode='"+bill.billCode+"'>"+
							"<div class='selfcenter-alertlist'>"+
							"<span style='color:red;'>订单合计：￥"+bill.price+"</span>"+
							"<img src='../../img/selfpagelist-icon.png'"+
								"style='width: 1.33rem; height: 0.52rem;' onclick='selectProvider()' billCode='"+bill.billCode+"' />"+
						"</div>"+
					"</div>");	
				}
			}
		}
		
		//跳转到用户评价页面
		function userEvaluate(){
			var $img = $(event.target);
			var billCode = $img.attr("billCode");
			location="/qiaomengapp/html/selfcenter/selfcenter-talk.html?"+billCode;
		}
	</script>
</body>
</html>